<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取Excel文件</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
    
</head>
<body>
    <h1>读取Excel文件内容</h1>
    
    <h2>Excel 内容:</h2>
    <pre id="excel-content"></pre>

    <script>
        function loadExcelFile(filePath) {
            // 使用 Fetch API 请求获取Excel文件
            fetch(filePath)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('文件加载失败');
                    }
                    return response.arrayBuffer();
                })
                .then(data => {
                    // 使用 SheetJS 解析 Excel 文件
                    const workbook = XLSX.read(data, { type: 'array' });

                    // 获取第一个工作表
                    const sheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[sheetName];

                    // 将工作表内容转换为 JSON 格式
                    const json = XLSX.utils.sheet_to_json(worksheet);

                    // 在页面上显示解析的内容
                    document.getElementById('excel-content').textContent = JSON.stringify(json, null, 2);
                })
                .catch(error => {
                    console.error('加载文件时出错:', error);
                });
        }

        // 设置要读取的文件路径
        const filePath ='../tree/leibie.xlsx'; // 假设Excel文件放在项目的相对路径下
        loadExcelFile(filePath);
    </script>
</body>
</html>